<template>
  <div class="app-container"
       v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-select v-model="formData.universityId"
                 placeholder="请选择大学"
                 style="width:150px">
        <el-option key="-1"
                   label="全部"
                   value="-1"></el-option>
        <el-option v-for="item in universityList"
                   :key="item.universityId"
                   :label="item.universityName"
                   :value="item.universityId">
        </el-option>
      </el-select>
      <el-select v-model="formData.year"
                 placeholder="年份"
                 style="width:80px">
        <el-option key="-1"
                   label="全部"
                   value="-1"></el-option>
        <el-option v-for="item in yearList"
                   :key="item"
                   :label="item"
                   :value="item">
        </el-option>
      </el-select>
      <el-select v-model="formData.volunteer"
                 placeholder="批次"
                 style="width:100px">
        <el-option key="-1"
                   label="全部"
                   value="-1"></el-option>
        <el-option v-for="item in volunteerList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="formData.subject"
                 placeholder="请选择科目">
        <el-option key="-1"
                   label="全部"
                   value="-1"></el-option>
        <el-option v-for="item in subjectList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click.native.prevent="handleSearch">
        搜索
      </el-button>
      <el-button style="margin-left: 10px;"
                 type="primary"
                 icon="el-icon-edit"
                 @click.native.prevent="handleImport">
        导入
      </el-button>
      <el-button style="margin-left: 10px;"
                 type="danger"
                 icon="el-icon-delete"
                 @click.native.prevent="handleDelete">
        删除
      </el-button>
    </div>
    <el-table border
              stripe
              highlight-current-row
              style="width: 100%;"
              :data="listData"
              @selection-change="handleSelectionChange"
              :empty-text="emptyText">
      <el-table-column type="selection"
                       width="55"></el-table-column>
      <el-table-column label="ID"
                       prop="enrollId"></el-table-column>
      <!-- <el-table-column label="universityId"
                       prop="universityId"></el-table-column> -->
      <el-table-column label="大学名称"
                       prop="universityName"></el-table-column>
      <el-table-column label="年份"
                       prop="enrollYear"></el-table-column>
      <!-- <el-table-column label="志愿批次"
                       prop="enrollVolunteer"></el-table-column> -->
      <el-table-column label="志愿批次"
                       prop="enrollVolunteerShow"></el-table-column>
      <!-- <el-table-column label="科目"
                       prop="enrollSubject"></el-table-column> -->
      <el-table-column label="科目"
                       prop="enrollSubjectShow"></el-table-column>
      <el-table-column label="计划人数"
                       prop="enrollPlanNum"></el-table-column>
      <el-table-column label="实际人数"
                       prop="enrollActualNum"></el-table-column>
      <el-table-column label="录取最高分"
                       prop="enrollHighScore"></el-table-column>
      <el-table-column label="录取最高分位次"
                       prop="enrollHighQuantile"></el-table-column>
      <el-table-column label="录取最低分"
                       prop="enrollLowScore"></el-table-column>
      <el-table-column label="录取最低分位次"
                       prop="enrollLowQuantile"></el-table-column>
      <el-table-column label="录取批次线"
                       prop="enrollBatchLine"></el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click.native.prevent="handleEdit(scope.row.enrollId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background
                     :pager-count="pagerCount"
                     :page-size="formData.perPage"
                     :current-page="formData.curPage"
                     layout="prev, pager, next"
                     @current-change="pageChange"
                     :total="total">
      </el-pagination>
    </div>
    <el-dialog title="大学招生录取数据"
               :visible.sync="dialogFormVisible">
      <el-form :model="importFormData"
               label-width="120px"
               label-position="left">
        <el-form-item label="excel文件">
          <el-upload :on-success="uploadSuccess"
                     action="uploadUrl">
            <el-button size="small"
                       type="primary">点击上传</el-button>
          </el-upload>
          <a href="UniversityEnrollmentDataExample.xlsx"
             target="_blank">点击下载示例excel</a>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native.prevent="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary"
                   @click.native.prevent="doImport">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, del, importExcel } from '@/api/enrollment'
import { getAll } from '@/api/university'
import { errorMsg, successMsg } from '@/utils/my'
import { parse } from 'path-to-regexp'

export default {
  inject: ['reload'],
  data () {
    return {
      formData: {
        universityId: '',
        year: '',
        volunteer: '',
        subject: '',
        curPage: 1,
        perPage: 10
      },
      pagerCount: 13,
      total: 0,
      listData: [],
      loading: true,
      delRows: [],
      delIds: '',
      emptyText: '暂无任何数据',
      dialogFormVisible: false,
      importFormData: {
        excelUrl: ''
      },
      universityList: [],
      yearList: [],
      volunteerList: [
        { id: "1", name: '本科一批' },
        { id: "2", name: '本科二批' },
        { id: "3", name: '高职高专' }
      ],
      subjectList: [
        { id: "1", name: '文科' },
        { id: "2", name: '理科' }
      ]
    }
  },

  created () {
    this.genYearList()
    this.fetchData()
    this.fetchUniversityList()
  },
  computed: {
    uploadUrl () {
      return `${process.env.VUE_APP_BASE_API}/upload/backend`
    }
  },
  methods: {
    handleCreate () {
      //this.$router.push({path: '/admin/rank/create'})
    },

    handleEdit (id) {
      this.$router.push({ path: '/admin/enrollment/edit/' + id })
    },

    pageChange (p) {
      this.formData.curPage = p
      this.fetchData()
    },

    fetchData () {
      const that = this
      that.loading = true
      let tmpData = JSON.parse(JSON.stringify(that.formData))

      tmpData.universityId = tmpData.universityId.length <= 0 ? 0 : parseInt(tmpData.universityId)
      tmpData.year = tmpData.year.length <= 0 ? 0 : parseInt(tmpData.year)
      tmpData.volunteer = tmpData.volunteer <= 0 ? 0 : parseInt(tmpData.volunteer)
      tmpData.subject = tmpData.subject <= 0 ? 0 : parseInt(tmpData.subject)

      getList(tmpData).then(res => {
        that.loading = false
        that.total = res.data.total
        that.listData = res.data.list
      })
    },

    handleSearch () {
      this.formData.curPage = 1
      this.fetchData()
    },

    handleSelectionChange (rows) {
      this.delRows = rows
      let idArr = []
      for (let i = 0; i < rows.length; i++) {
        idArr.push(rows[i].enrollId)
      }
      this.delIds = idArr.join(',')
    },

    handleDelete () {
      const that = this
      if (that.delIds.length <= 0) {
        return errorMsg('请至少选择一项')
      }
      that.loading = true
      del({ ids: that.delIds }).then(res => {
        that.loading = false
        if (res.code != 20000) {
          return errorMsg(res.message)
        }
        successMsg(res.message)
        that.reload()
      })
    },

    handleImport () {
      this.dialogFormVisible = true
    },

    genYearList () {
      const that = this
      let d = new Date(),
        curYear = d.getFullYear()
      for (let i = 0; i < 4; i++) {
        that.yearList.push(curYear)
        curYear--
      }
    },

    fetchUniversityList () {
      const that = this
      getAll().then(res => {
        that.universityList = res.data
      })
    },

    uploadSuccess (res) {
      if (res.code != 20000) {
        return errorMsg(res.message)
      }
      this.importFormData.excelUrl = res.data.url
      successMsg(res.message)
    },

    doImport () {
      const that = this
      let d = that.importFormData
      // if (d.universityId.length <= 0) {
      //   return errorMsg('请选择大学名称')
      // }
      if (d.excelUrl.length <= 0) {
        return errorMsg('请上传excel文件')
      }
      that.dialogFormVisible = false
      that.loading = true
      importExcel(d).then(res => {
        that.loading = false
        if (res.code != 20000) {
          return errorMsg(res.message)
        }
        successMsg(res.message)
        that.reload()
      })
    }
  }
}
</script>

<style>
.filter-container {
  margin-bottom: 10px;
}

.pager {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
</style>
